html.small {
	.layout {
		.el-container {
			.el-header {
				.nav-bar {
					.left {
						.menu-collapse {
							width: 30px;
						}
					}
					.right {
						.el-menu--horizontal {
							--el-menu-item-font-size: var(--el-font-size-small);
						}
						.screen-full {
							width: 30px;
						}
						.setting {
							width: 30px;
						}
						.avatar {
							font-size: var(--el-font-size-extra-small);
							.el-avatar {
								--el-avatar-size: 22px !important;
							}
						}
					}
				}
			}
			.el-footer {
				font-size: var(--el-font-size-extra-small);
			}
		}
	}
}

.layout {
	.el-aside {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		transition: width var(--el-transition-duration);
		background-color: var(--el-bg-color);
		border-right: var(--el-border);
		overflow: hidden;
	}
	.el-container {
		.el-header {
			--el-header-padding: 0;
			--el-header-height: auto;
			transition: height var(--el-transition-duration);
			background-color: var(--el-bg-color);
			.nav-bar {
				transition: height var(--el-transition-duration);
				height: var(--height);
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				border-bottom: var(--el-border);
				box-sizing: border-box;
				overflow: hidden;
				.left {
					height: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					.menu-collapse {
						height: 100%;
						width: 35px;
						font-size: var(--el-font-size-large);
						cursor: pointer;
						&:hover {
							background-color: var(--el-text-color-disabled);
						}
					}
				}
				.right {
					height: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					gap: 5px;
					.el-menu--horizontal {
						--el-menu-horizontal-height: 100%;
						border: none;
					}
					.fa-select {
						.el-select-dropdown__wrap {
							max-height: 200px;
							.el-select-dropdown__list {
								li {
									height: 100%;
									padding: 0 15px 0 10px;
									display: flex;
									flex-direction: row;
									justify-content: space-between;
									align-items: center;
									gap: 10px;
									&:not(:last-child) {
										border-bottom: var(--el-border);
									}
									.tenant__warp {
										flex: 1;
										display: flex;
										flex-direction: column;
										.tenant__top {
											display: flex;
											align-items: center;
											justify-content: space-between;
											.top__name {
												display: flex;
												align-items: center;
												color: var(--el-text-color-regular);
												font-weight: var(--el-font-weight-primary);
											}
											img {
												width: 25px;
												height: 25px;
												margin-right: 5px;
												border-radius: 50%;
											}
										}
										.tenant__center {
											margin-left: 30px;
											margin-top: -15px;
											color: var(--el-text-color-disabled);
											display: flex;
											justify-content: space-between;
											font-size: var(--el-font-size-small);
										}
										.tenant__bottom {
											margin-left: 15px;
											margin-top: -15px;
											color: var(--el-text-color-disabled);
											display: flex;
											justify-content: space-between;
											align-items: center;
											font-size: var(--el-font-size-small);
											.bottom__name {
												display: flex;
												align-items: center;
												font-weight: var(--el-font-weight-primary);
											}
											.el-tag {
												margin-right: 5px;
											}
											img {
												width: 20px;
												height: 20px;
												margin-left: 5px;
												border-radius: 50%;
											}
										}
									}
									.el-icon {
										transition:
											background-color var(--el-transition-duration) ease,
											color var(--el-transition-duration) ease,
											transform var(--el-transition-duration) ease;
										&:hover {
											border-radius: 50%;
											background-color: var(--el-color-primary);
											color: var(--el-color-white);
										}
									}
								}
							}
						}
						:deep() {
							.el-select-dropdown__footer {
								padding: 5px 0;
								.el-button {
									width: 100%;
								}
							}
						}
					}
					.screen-full {
						width: 35px;
						&:hover {
							background-color: var(--el-text-color-disabled);
						}
					}
					.setting {
						height: 100%;
						width: 35px;
						font-size: var(--el-font-size-large);
						cursor: pointer;
						&:hover {
							background-color: var(--el-text-color-disabled);
						}
					}
					.avatar {
						height: 100%;
						-webkit-user-select: none;
						user-select: none;
						padding: 0 5px;
						cursor: pointer;
						&:hover {
							background-color: var(--el-text-color-disabled);
						}
						.user-info {
							display: flex;
							flex-direction: row;
							align-items: center;
							gap: 5px;
							.nick-name {
								max-width: 100px;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}
					}
				}
			}
		}
		.el-main {
			box-sizing: border-box;
			overflow-x: hidden;
			background-color: var(--el-bg-color-page);
			:deep(.el-scrollbar) {
				.el-scrollbar__wrap {
					.el-scrollbar__view {
						height: 100%;
						.layout-main {
							flex: 1;
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
		.el-footer {
			font-size: var(--el-font-size-small);
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: height var(--el-transition-duration);
			overflow: hidden;
			background-color: var(--el-bg-color);
			border-top: var(--el-border);
		}
	}
}

.layout.contentFull,
.layout.contentLarge {
	.el-aside {
		--el-aside-width: 0 !important;
		border-right-width: 0;
	}
	.el-container {
		.el-header {
			.nav-bar {
				--height: 0 !important;
			}
		}
		.el-footer {
			--el-footer-height: 0 !important;
		}
	}
}

.layout.contentFull {
	.el-container {
		.el-header {
			.nav-tab {
				--height: 0 !important;
			}
		}
	}
}

// .el-container {
// 	.el-header {
// 		overflow: hidden;
// 		.nav-bar {
// 			flex-direction: row;
// 			overflow: hidden;
// 			.right {
// 				.el-select {
// 					margin-right: 10px;
// 				}
// 			}
// 		}
// 	}
// }
